<template>
  <el-dialog v-model="visible" :title="'申请详情'" width="820px" append-to-body @open="open" @close="close">
    <div v-loading="loading" class="detail-content">
      <!-- 申请人基本信息 -->
      <div class="applicant-summary">
        <div class="avatar-section">
          <el-avatar :src="detail.avatar" :size="50" />
          <div class="applicant-info">
            <div class="name">{{ detail.realName || '-' }}</div>
            <el-tag :type="detail.status === 0 ? 'warning' : detail.status === 1 ? 'success' : detail.status === 2 ? 'danger' : 'info'">
              {{ detail.status === 0 ? '待审核' : detail.status === 1 ? '已通过' : detail.status === 2 ? '已拒绝' : '未知' }}
            </el-tag>
          </div>
        </div>
        <div class="application-date">申请于 {{ detail.createTime || '-' }}</div>
      </div>

      <!-- 个人信息 -->
      <div class="info-section">
        <div class="section-header">
          <el-icon><User /></el-icon>
          <span>个人信息</span>
        </div>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">姓名:</span>
            <span class="value">{{ detail.realName || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="large-label">身份证号:</span>
            <span class="value">{{ detail.idCard || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="short-label">性别:</span>
            <span class="value">{{ detail.sex === 1 ? '男' : '女' }}</span>
          </div>
          <div class="info-item">
            <span class="large-label">手机号:</span>
            <span class="value">{{ detail.phone || '-' }}</span>
          </div>
          <div class="info-item">
            <span class="short-label">年龄:</span>
            <span class="value">{{ detail.age ?? '-' }}岁</span>
          </div>
        </div>
      </div>

      <!-- 身份证照片 -->
      <div class="info-section">
        <div class="section-header">
          <el-icon><Picture /></el-icon>
          <span>身份证照片</span>
        </div>
        <div class="id-photos">
          <div class="id-photo-item">
            <div class="photo-label">身份证正面</div>
            <div class="photo-container">
              <el-image 
                v-if="detail.frontImage"
                :src="detail.frontImage" 
                class="id-photo" 
                fit="cover" 
                :preview-src-list="[detail.frontImage]"
                :preview-teleported="true"
              >
              </el-image>
              <div v-else class="no-image">暂无图片</div>
            </div>
          </div>
          <div class="id-photo-item">
            <div class="photo-label">身份证背面</div>
            <div class="photo-container">
              <el-image 
                v-if="detail.backImage"
                :src="detail.backImage" 
                class="id-photo" 
                fit="cover" 
                :preview-src-list="[detail.backImage]"
                :preview-teleported="true"
              >
              </el-image>
              <div v-else class="no-image">暂无图片</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 审核信息 - 仅审核后显示 -->
      <div v-if="detail.status !== 0" class="info-section">
        <div class="section-header">
          <el-icon><CircleCheck /></el-icon>
          <span>审核信息</span>
        </div>
        <div class="audit-info">
          <div class="audit-item">
            <span class="label">审核人:</span>
            <span class="value">{{ detail.checkUser || '-' }}</span>
          </div>
          <div class="audit-item">
            <span class="label">审核时间:</span>
            <span class="value">{{ detail.checkTime || '-' }}</span>
          </div>
          <div v-if="detail.checkOpinion" class="audit-item opinion">
            <span class="label">审核意见:</span>
            <div class="opinion-content">{{ detail.checkOpinion }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { getApplication } from '@/api/application/application'

const props = defineProps({
  detailDialogVisible: { type: Boolean, default: false },
  applicationId: { type: Number, default: null }
})

const emit = defineEmits(['handleClose']);
const visible = ref(false)
const loading = ref(false)
const detail = ref({})

watch(
  () => props.detailDialogVisible,
  (val) => {
    visible.value = val;
  }
)

const open = () => {
  fetchDetail();
}

const close = () => {
  visible.value = false;
  emit('handleClose');
}
const fetchDetail = () => {
  loading.value = true
  getApplication(props.applicationId).then(res => {
    detail.value = res.data || {}
  }).finally(() => {
    loading.value = false
  })
}
</script>

<style scoped lang="scss">
.detail-content {
  padding: 0;

  .applicant-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 24px;

    .avatar-section {
      display: flex;
      align-items: center;
      gap: 16px;

      .applicant-info {

        .name {
          margin-bottom: 8px;
          font-size: 18px;
          font-weight: 600;
          color: #1f2937;
        }
      }
    }

    .application-date {
      font-size: 14px;
      color: #6b7280;
    }
  }

  .info-section {
    margin-bottom: 24px;

    .section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 16px;
      padding-bottom: 8px;
      border-bottom: 2px solid #e5e7eb;
    }

    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;

      .info-item {
        display: flex;
        align-items: center;
        gap: 8px;

        .short-label,
        .label {
          font-size: 14px;
          color: #6b7280;
          min-width: 50px;
        }

        .large-label {
          font-size: 14px;
          color: #6b7280;
          min-width: 80px;
        }

        .value {
          font-size: 14px;
          color: #1f2937;
          font-weight: 500;
        }
      }
    }

    .id-photos {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;

      .id-photo-item {
        .photo-label {
          font-size: 14px;
          color: #6b7280;
          margin-bottom: 12px;
        }

        .photo-container {
          .id-photo {
            width: 100%;
            height: 200px;
            border-radius: 8px;
            border: 1px solid #e5e7eb;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover {
              border-color: #0052d9;
              box-shadow: 0 2px 8px rgba(0, 82, 217, 0.15);
            }
          }

          .no-image {
            width: 100%;
            height: 200px;
            border-radius: 8px;
            border: 1px dashed #d1d5db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9ca3af;
            font-size: 14px;
          }
        }
      }
    }

    .audit-info {
      background-color: #f9fafb;
      padding: 16px;
      border-radius: 8px;
      border-left: 4px solid #10b981;

      .audit-item {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          font-size: 14px;
          color: #6b7280;
          min-width: 80px;
          flex-shrink: 0;
        }

        .value {
          font-size: 14px;
          color: #1f2937;
          font-weight: 500;
        }

        &.opinion {
          .opinion-content {
            background-color: #dbeafe;
            padding: 12px;
            border-radius: 6px;
            border-left: 4px solid #3b82f6;
            font-size: 14px;
            color: #1e40af;
            line-height: 1.5;
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .detail-content {
    .info-grid {
      grid-template-columns: 1fr;
    }

    .id-photos {
      grid-template-columns: 1fr;
    }
  }
}
</style>


